<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
    <title>智慧社区-物业管理</title>
    <meta name="description" content="Dashboard" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="${pageContext.request.contextPath}/resource/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/font-awesome.min.css" rel="stylesheet" />

    <!--Beyond styles-->
    <link href="${pageContext.request.contextPath}/resource/assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/assets/css/demo.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/assets/css/layout.css">
<script src="${pageContext.request.contextPath}/resource/assets/js/skins.min.js"></script>
<style>
/**
* Grid items
*/
/* #tiles li{opacity:0;
-webkit-transition:all 0.8s ease-out;
-moz-transition:all 0.8s ease-out;
-o-transition:all 0.8s ease-out;
transition:all 0.8s ease-out;
} */
</style>
</head>
<body>
<%@include file="header.jsp" %>
	<!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- Page Sidebar -->
            <%@include file="nav.jsp" %><!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                	<div class="row masonry-container">

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, illum voluptates consectetur consequatur ducimus. Necessitatibus, nobis consequatur hic eaque laborum laudantium. Adipisci, explicabo, asperiores molestias deleniti unde dolore enim quas.</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, illum voluptates consectetur consequatur ducimus. Necessitatibus, nobis consequatur hic eaque laborum laudantium. Adipisci, explicabo, asperiores molestias deleniti unde dolore enim quas.</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, illum voluptates consectetur consequatur ducimus. Necessitatibus, nobis consequatur hic eaque laborum laudantium. Adipisci, explicabo, asperiores molestias deleniti unde dolore enim quas.</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-md-4 col-sm-6 item" style="width: 50% !important">
            <div class="thumbnail">
              <img src="http://lorempixel.com/200/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, illum voluptates consectetur consequatur ducimus. Necessitatibus, nobis consequatur hic eaque laborum laudantium. Adipisci, explicabo, asperiores molestias deleniti unde dolore enim quas.</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>

        </div> <!--/.masonry-container  -->
                	
                </div><!-- /Page Body -->
             </div><!-- /Page Content -->
     	</div><!-- /Page Container -->
     </div><!-- /Main Container -->
     	<script src="${pageContext.request.contextPath}/resource/assets/js/jquery-2.0.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/bootstrap.min.js"></script>

    <!--Beyond Scripts-->
    <script src="${pageContext.request.contextPath}/resource/assets/js/beyond.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/assets/js/jquery.imagesloaded.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/masonry/3.1.5/masonry.pkgd.min.js"></script>
    <script type="text/javascript">
    $(document).ready(new function() {  
    	$('.loading-container').hide();
    	 var $container = $('.masonry-container');
    	    $container.imagesLoaded( function () {
    	        $container.masonry({
    	            columnWidth: '.item',
    	            itemSelector: '.item',
				    isAnimated: true,//是否采用jquery动画进行重拍版
    	        });
    	    });
    	    
    	    //Reinitialize masonry inside each panel after the relative tab link is clicked - 
    	    $('a[data-toggle=tab]').each(function () {
    	        var $this = $(this);

    	        $this.on('click', function () {
    	        
    	            $container.imagesLoaded( function () {
    	                $container.masonry({
    	                    columnWidth: '.item',
    	                    itemSelector: '.item'
    	                });
    	            });

    	        }); //end shown
    	    });  //end each

    }); 
    </script>
</body>
</html>